<template>
    <!-- 通用表单form dialog  -->
    <el-dialog
    :append-to-body='true'
    :title="dialogTitle"
    :visible.sync="isshowDialogs"
    :width="dialogWidth"
    :show-close='false'
    :close-on-click-modal='false'
    :top='topHeight'
    @close='closedialog'
    :close-on-press-escape='false'
    v-if="isshowDialogs"
    >
    <!-- 导入数据成功显示的标题 -->
    <div slot="title" v-if="isshowimportTitle" class="dataList">
        <span>成功录入</span>
        <span>{{importNum}}</span>
        <span>数据</span>
    </div>
    <!-- 恭喜入驻成功标题 -->
    <div slot="title" class="entertitle" v-if="enterTitle">
        <h3>恭喜您已成功入驻</h3>
        <p>完成以下操作即可将驾校信息展示在万骏驾考小程序和App， 获取更多曝光机会和学员咨询信息！</p>
    </div>
    <!-- 关闭按钮 -->
    <i class="iconfont closeicon" @click='closepassword'>&#xe6ce;</i>
    <div class="formDialogcontent">
        <slot></slot>
    </div>
    <span slot="footer" class="dialog-footer" v-if="isshowFooter">
      <el-button  @click="closepassword" size="medium">取 消</el-button>
      <el-button type="primary" @click="confirmbtn" size="medium" :disabled="isabledconfirm">确 定</el-button>
    </span>
    </el-dialog>
</template>

<script>
import {getAccessToken} from '@/utils/accessToken'
export default {
    data(){
        return{

        }
    },
    props:{
        //是否禁用确认按钮
        isabledconfirm:false,
        //是否显示入驻成功提示标题
        enterTitle:{
            type:Boolean,
            default:false
        },
        //是否显示导入成功标题
        isshowimportTitle:{
            type:Boolean,
            default:false
        },
        //录入了几条数据
        importNum:{
            type:Number,
            default:0
        },
        dialogTitle:{
            type:String,
            default:'标题'
        },
        //是否显示弹窗
        isshowDialogs:{
            type:Boolean,
            default:false,
            required:true
        },
        //弹窗的宽度
        dialogWidth:{
            type:String,
            default:'45%'
        },
        //弹窗高度
        topHeight:{
            type:String,
            default:'0'
        },
        //是否显示底部按钮区域
        isshowFooter:{
            type:Boolean,
            default:true
        },
        //是否显示确认按钮
        isshowconfirmbtn:{
            type:Boolean,
            default:false
        }
    },
    methods:{
        //关闭弹窗的回调
        closedialog(){
            this.$emit('closetextDialog')
        },
        //关闭弹窗
        closepassword(){
            this.$emit('closetextDialog')
        },
        //确认提交按钮
        confirmbtn(){
            this.$emit('confirmbtn')
        }
    }

}
</script>

<style scoped lang='scss'>
.formDialogcontent{
    width: 100%;
}
.closeicon{
    position: absolute;
    right: 20px;
    top: 15px;
    cursor: pointer;
    font-size: 24px;
    color: hsla(0,0%,40%,.6784313725490196);
    &:hover{
        color: $base-color-default;
    }
}
.dataList{
    span{
        font-size: 18px;
        font-weight: bold;
        &:nth-child(2){
            margin: 0 5px;
            color: #ff7850;
            font-size: 19px;
        }
    }
}
.entertitle{
    text-align: center;
    h3{
        font-size: 24px;
        color: #333;
        margin: 10px 0;
    }
    p{
        font-size: 15px;
        line-height: 24px;
        color: rgba(0,0,0,.65);
    }
}
::v-deep{
  .el-dialog__body {
    max-height: calc(70vh - 124px);
    overflow: auto;
  }
.el-dialog{
position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -52%);
 margin-top: 0 !important;
}
}
</style>
